<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box3{
        width: 100px;
        height: 100px;
        background-color: orange;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
<body>
    <div class="box">
        <h1>{{info}}</h1>
        <button v-on:click="baiduBtn">百度一下试试vue</button>
        <!-- 计算器 -->
        <h1>{{num}}</h1>
        <!-- <button v-on:click="num++">加</button> -->
        <!-- v-on可以绑定事件   v-on:事件名=回调函数   可简写为@事件名=回调函数-->
        <button v-on:click="num += 1">加</button>
        <button @click="num--">减</button>
        <button @click="test">test</button>
        <button @click="add(item)">加  item</button>
        <button @click="item+=5">更改item</button>
        <hr>
        <!-- 获取event(事件对象) -->
        <!-- 不传参时，如果需要事件对象event 直接在回调函数中接收即可 -->
        <div class="box1" @click="btnBox"></div>
        <!-- 如果加了（） 直接接收是接收不到 需要将事件对象$event传递进去即可-->
        <div class="box2" @click="btnBox1($event)"></div>

        <!-- 一个元素可以绑定多个事件 -->
        <!-- 一个元素绑定多个相同的事件 -->
        <div class="box3" @click="test1();test2();test3()"></div>
        <!-- 一个元素绑定多个不同的事件 -->
        <div class="box4" v-on="{click:test1,mousemove:test2,mousedown:test3}"></div>

    </div>
    <hr>
    <button class="btnBaidu">百度一下</button>
    
    <script>
        /* 
        绑定事件：
        1.事件对象  给谁绑定的事件  DOM  
        2.绑定事件要做什么  绑定的事件对应的回调函数是什么  回调函数 
        3.怎么触发事件 onclick  mousemove mouseDown mouseup change....
        
        */
       /* document.querySelector('.btnBaidu').onclick=function(e){
           console.log(111);
           console.log(e);
       }; */
        const vm = new Vue({
            el:'.box',
            data:{
                info:'xxx',
                num:1,
                item:5
            },
            // vue中的回调函数都写到methods中  methods {}  key:value
            methods:{
               /*  baiduBtn:function(){
                    console.log('vue事件绑定的回调函数')
                } */
                baiduBtn(){
                    console.log('vue事件绑定的回调函数')
                },
                test(){
                    // 在vue实例对象当中 methods中的方法中this指向当前的vue实例对象
                    console.log(this);//this  vm
                    console.log(this.info);
                    // vue实例当中methods中的方法作为vue实例上的方法存储到vue实例
                },
                // 验证事件可以传参
                add(num){
                    console.log(num);
                    this.num += num;
                },
                btnBox(event){
                    console.log('btnbox');
                    console.log(event);
                },
                btnBox1(event){
                    console.log('btnbox');
                    console.log(event);
                },
                test1(){
                    console.log('test1');
                },
                test2(){
                    console.log('test2');
                },
                test3(){
                    console.log('test3');
                }
            }
        })
        console.log(vm);
        console.log(vm.info);
        console.log(vm.num);
        vm.test();
        vm.baiduBtn();
    </script>
</body>
</html>